<!DOCTYPE html>
<html>
<head>
    <title>接口服务说明文档【${app.name}】</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="${contextPath}/css/default.css" type="text/css"/>
    <link rel="stylesheet" href="${contextPath}/css/theme-chalk.css" type="text/css"/>
    <script src="${contextPath}/jquery/jquery.min.js"></script>
    <script src="${contextPath}/vue/vue.global.js"></script>
    <script src="${contextPath}/vue/index.full.js"></script>
</head>
<body>
<div id="app">
    <el-container>
        <el-aside>
            <div style="width:300px;border-right: 1px solid #ddd;background-color: #fafafa;display: flex;flex-direction: column;position: fixed;bottom: 0px;left: 0px;top: 0px;">
                <div style="flex: none;line-height: 25px;margin-top:10px;padding: 0 20px;border-bottom: 1px solid #ddd;">
                    <b>${app.note}</b>
                </div>
                <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
                <div style="flex: auto;overflow: hidden;position: relative;">
                    <div style="position: absolute;top: 0px;bottom: 0px;right: 0px;left: 0px;overflow-y: auto">
                        <el-tree :data="menuData" :props="menuDefaultProps" @node-click="handleNodeClick"
                                 :filter-node-method="filterNode" ref="tree" node-key="apiId"
                                 :highlight-current="true" style="background-color: #fafafa;"></el-tree>
                    </div>
                </div>
                <div style="flex: none;line-height: 55px;padding: 0 12px;border-top: 1px solid #ddd;">@acmen.com</div>
            </div>
        </el-aside>
        <el-main style="position: fixed;right: 0px;bottom: 0px;top: 0px;left: 300px;padding:0px;">
            <iframe :src="iframeSrc" style="width:100%;border:0px;height: 99%;" ref="iframe"></iframe>
            <el-backtop target=".el-main"></el-backtop>
        </el-main>
    </el-container>
</div>
</body>


<script>
    var menuData = JSON.parse('${menuTree}').childrens;
    var urlPre = '${contextPath}/api/';
    var apiId = '${apiId}';
    var appName = '${app.name}';
    //默认不允许选中的菜单
    const App = {
        el: '#app',
        data: function () {
            return {
                menuData: menuData,
                menuDefaultProps: {
                    children: 'childrens',
                    label: 'name'
                },
                iframeSrc: apiId != '' ? urlPre + apiId : '/app/note?appName=${app.name}',
                filterText: '',
                defaultExpandedKeys: [apiId]
            };
        },
        methods: {
            handleNodeClick(data) {
                if (data.url != undefined) {
                    this.iframeSrc = data.url;
                    if (data.apiId) {
                        updateUrlParam("apiId", data.apiId);
                    }
                }
            },
            filterNode(value, data, node) {
                if (!value) return true;
                value = value.replace(/^\s*|\s*$/g, "")
                let level = node.level;
                let _array = [];//这里使用数组存储 只是为了存储值。
                this.getReturnNode(node, _array, value);
                let result = false;
                _array.forEach((item) => {
                    result = result || item;
                });
                return result;
            },
            getReturnNode(node, _array, value) {
                let isPass = node.data && ((node.data.name && node.data.name.indexOf(value) !== -1) || (node.data.path && node.data.path.indexOf(value) !== -1));
                isPass ? _array.push(isPass) : '';
                this.index++;
                if (!isPass && node.level != 1 && node.parent) {
                    this.getReturnNode(node.parent, _array, value);
                }
            }
        },
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            }
        },
        mounted() {
            this.$nextTick(function () {
                // 仅在渲染整个视图之后运行的代码
                this.$nextTick(() => {
                    //默认选中高亮显示
                    this.$refs.tree.setCurrentKey(apiId); // treeBox 元素的ref   value 绑定的node-key
                });
            })
        }
    };
    const app = Vue.createApp(App);
    app.use(ElementPlus);
    app.mount("#app");
</script>
</html>
